<template>
  <div>
    <div style="width: 800px; height: 400px" id="pie"></div>
  </div>
</template>
<script>

// 设置饼图
import * as echarts from "echarts";
export default {
  data() {
    return {

    }
  },
  methods: {
    // 发送请求，从后台获取数据
    sendRequest() {
      this.$http("/hot-info/first?count=10&currentDate=" + this.$store.state.currentDate).then((response) => {
        if(response.data.code !== 0) {
          this.$message.error(response.data.msg);
          return;
        }
        this.$store.commit('changeAllData', response.data.data);
        this.loadPie(this.$store.state.allData);
      });
    },
    loadPie(dataList) {
      let pieData = [];
      for(let j=0; j<dataList.length; j++) {
        pieData.push({
          name: dataList[j].firstword,
          value: dataList[j].hotIndex,
        });
      }
      let pieOption = ({
        title: {
          text: "知乎前10热点饼图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "right",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      let pieChart = echarts.init(document.getElementById("pie"));
      pieChart.setOption(pieOption);
    }
  },
  mounted() {
    this.sendRequest();
  }
}

</script>
